<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>风向分布</title>
    <script src="../echarts.js"></script>
    <script src="../lodash.min.js"></script>
    <style>
        .flex{
            display: flex;
        }
    </style>
</head>
<body style="background:#0B0D39">
    <!-- 为ECharts准备一个具备大小（宽高）的DOM -->
    <div id="main1" style="width: 100%; height: 500px"></div>
    <!-- <div id="mainr" style="width: 50%; height: 500px"></div> -->
    

    <script>
        // 指定图标的配置项和数据
        let angleAxisItem = {
            type: 'category',
            data: ['N', '', '', '', 'E', '', '', '', 'S','', '','','W', '','', ''],
            boundaryGap: false,
    　　    //坐标轴轴线设置
            axisLine: {
        　　　　lineStyle: {
    　　　　　　    color: '#09335E'
        　　　　}
        　　},
            //分割线设置
        　　splitLine: {
        　　　　show: true,
                lineStyle: {
                    color: 'rgba(32, 161, 255, .3)',
                }
        　　},
            //刻度标签设置
        　　axisLabel: { 
                margin: 12,
        　　　　textStyle: {
                    fontSize: 14,
        　　　　},
        　　}
        }
        let option = {
            textStyle: {
                color: '#fff'
            },
            polar: [
                {
                    center: ['20%', '40%'],
                    radius: '40%'
                },
                {
                    center: ['60%', '40%'],
                    radius: '40%'
                }
            ],
            // 极坐标系的角度轴
            angleAxis: (() => {
                let a = []
                for(let i=0; i < 2; i++){
                    a.push(Object.assign({},{polarIndex: i},angleAxisItem))
                }
                return a
            })(),
            // angleAxis: [
            //     {
            //         polarIndex: 0,
            //         type: 'category',
            //         data: ['N', '', '', '', 'E', '', '', '', 'S','', '','','W', '','', ''],
            //         boundaryGap: false,
            // 　　    //坐标轴轴线设置
            //         axisLine: {
            //     　　　　lineStyle: {
            // 　　　　　　    color: '#09335E'
            //     　　　　}
            //     　　},
            //         //分割线设置
            //     　　splitLine: {
            //     　　　　show: true,
            //             lineStyle: {
            //                 color: 'rgba(32, 161, 255, .3)',
            //             }
            //     　　},
            //         //刻度标签设置
            //     　　axisLabel: { 
            //             margin: 12,
            //     　　　　textStyle: {
            //                 fontSize: 14,
            //     　　　　},
            //     　　}
            //     },
            //     {
            //         polarIndex: 1,
            //         type: 'category',
            //         data: ['N', '', '', '', 'E', '', '', '', 'S','', '','','W', '','', ''],
            //         boundaryGap: false,
            // 　　    //坐标轴轴线设置
            //         axisLine: {
            //     　　　　lineStyle: {
            // 　　　　　　    color: '#09335E'
            //     　　　　}
            //     　　},
            //         //分割线设置
            //     　　splitLine: {
            //     　　　　show: true,
            //             lineStyle: {
            //                 color: 'rgba(32, 161, 255, .3)',
            //             }
            //     　　},
            //         //刻度标签设置
            //     　　axisLabel: { 
            //             margin: 12,
            //     　　　　textStyle: {
            //                 fontSize: 14,
            //     　　　　},
            //     　　}
            //     }
            // ],
            // 极坐标系的径向轴
            radiusAxis: [{
                polarIndex: 0,
                type: 'value',
                axisLine: { //坐标轴轴线设置
            　　　　show: false,
            　　},
            　　axisLabel: { //刻度标签设置
            　　　　textStyle: {
            　　　　　　color: 'rgba(255,255, 255, 0.3)',
            　　　　},
                    //使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
                    formatter:(val, index) => {
                        return `${val}%`;
                    },
            　　},
                splitLine: {
                    lineStyle: {
                        color: 'rgba(32, 161, 255, 0.3)',
                        type: 'dashed'
                    }
                },
            },
            {
                polarIndex: 1,
                type: 'value',
                axisLine: { //坐标轴轴线设置
            　　　　show: false,
            　　},
            　　axisLabel: { //刻度标签设置
            　　　　textStyle: {
            　　　　　　color: 'rgba(255,255, 255, 0.3)',
            　　　　},
                    //使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
                    formatter:(val, index) => {
                        return `${val}%`;
                    },
            　　},
                splitLine: {
                    lineStyle: {
                        color: 'rgba(32, 161, 255, 0.3)',
                        type: 'dashed'
                    }
                },
            }
            ],
            series: [
                {
                    name:'1#',
                    type: 'effectScatter',
                    center:['10%','80%'],
                    barWidth: 200,
                    data:[2, 2, 5, 4, 3, 5, 1, 6, 7, 8, 9, 12],
                    coordinateSystem: 'polar',
                    polarIndex: 0,
                    itemStyle:{
                        normal:{
                            color:'rgba(64,158,255,0.7)'
                        }
                    }
                },
                {
                    name:'2#',
                    type: 'effectScatter',
                    center:['50%','80%'],
                    barWidth: 200,
                    data:[2, 2, 5, 4, 3, 5, 1, 6, 7, 8, 9, 12],
                    coordinateSystem: 'polar',
                    polarIndex: 1,
                    itemStyle:{
                        normal:{
                            color:'rgba(64,158,255,0.7)'
                        }
                    }
                }
            ]
        };
        // 基于准备好的DOM，初始化echarts实例
        var chart1 = echarts.init(document.getElementById('main1'));
        console.log(option.angleAxis)


        // 使用刚指定的配置项和数据显示图表
        chart1.setOption(option)
    </script>
</body>
</html>